<template>
  <div class="hygl_box">
    <header-comm></header-comm>
    <div class="header_sele" :style="$parent.$parent.collapsed==false?'left: 10%':'left:80px'">
      <div class="add_qy">
        <a-button type="primary" @click="tjwz">添加会员</a-button>
        <a-button type="primary" @click="exportexl">导出excel</a-button>
        <a-button type="primary" @click="memdelete">批量删除</a-button>
      </div>
      <div>
        <!-- <div class="list_head"></div> -->
        <div class="gl_tjwz" v-if="$store.state.tjwz">
          <hyym class="gl_tjym"></hyym>
        </div>
        <div class="gl_tjwz kpxx_tk" v-if="$store.state.kpxx">
          <kpxx class="gl_tjym"></kpxx>
        </div>
        <div class="gl_tjwz kpxx_tk" v-if="$store.state.shdz">
          <shdz class="gl_tjym"></shdz>
        </div>

        <div class="seach">
          <div>
            <a-radio-group name="radioGroup" @change="radioGroup" :default-value="radioval">
              <a-radio :value="1">全部</a-radio>
              <a-radio :value="2">网络推广商</a-radio>
            </a-radio-group>
          </div>
          <div class="sele">
            <a-input placeholder="请输入 " style="width: 250px" @change="onSearch" />
            <a-icon type="search" class="search" />
          </div>
        </div>
      </div>
    </div>
    <!-- 表格-================= -->
    <div class="bcg">
      <div class="glwz">
        <a-table
          @change="handleChangelist"
          :rowSelection="rowSelection"
          :loading="loading"
          :columns="columns"
          :pagination="pagination"
          :dataSource="data"
          :scroll="{ x: 2300 }"
        >
          <template v-for="titletext in []" :slot="titletext" slot-scope="text, record, index">
            <div :key="titletext"></div>
          </template>
          <template slot="agentCity" slot-scope="text, record, index">
            <div>{{record.agentProvice}}{{record.agentCity}}{{record.agentDistrict}}</div>
          </template>
          <template slot="live" slot-scope="text, record, index">
            <div>{{record.province}}{{record.city}}{{record.district}}</div>
          </template>

          <template slot="UserList" slot-scope="text, record, index">
            <div>
              <a-select
                show-search
                :placeholder="record.businessName"
                option-filter-prop="children"
                style="width: 200px"
                allowClear
                :filter-option="filterOption"
                @focus="handleFocus"
                @blur="handleBlur"
                @change="rwrChange"
                @search="rwrinput"
              >
                <a-select-option
                  :title="item.username"
                  v-for=" (item,i) in UserList"
                  :key="i"
                  @click="groupList(record)"
                  :value="item.username"
                >{{item.username}}</a-select-option>
              </a-select>
            </div>
          </template>
          <template slot="sharer" slot-scope="text, record, index">
            <div>
              <a-select
                show-search
                :placeholder="text"
                option-filter-prop="children"
                style="width: 200px"
                allowClear
                :filter-option="filterOption"
                @focus="handleFocus"
                @blur="handleBlur"
                @change="selhandleChange"
                @search="selinput"
              >
                <a-select-option
                  :title="item.gsmc +'---'+ item.username"
                  v-for=" (item,i) in tjrlist"
                  :key="i"
                  @click="groupList(record)"
                  :value="item.phone"
                >{{item.username}} {{item.phone}}</a-select-option>
                <!--  {{item.gsmc}} -->
              </a-select>
            </div>
          </template>

          <template slot="operation" slot-scope="text, record, index">
            <div class="editable-row-operations">
              <a class="del" @click="()=>xiugai(record,record.key)">修改</a>

              <a-dropdown>
                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                  更多
                  <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a-popconfirm
                      title="确定删除吗?"
                      class="del"
                      @confirm="() =>wzdelete(record,record.key)"
                    >删除</a-popconfirm>
                  </a-menu-item>
                  <a-menu-item>
                    <a-popconfirm
                      class="del"
                      title="确定初始化密码?"
                      @confirm="() =>memberReset(record,record.key)"
                    >初始化密码</a-popconfirm>
                  </a-menu-item>
                  <!-- <a-menu-item>
                    <a
                      class="del"
                      v-if="record.cyyn_type==0&&sqdwid=='18775'"
                      @click="create(record)"
                    >创业摇篮</a>
                  </a-menu-item>-->
                  <a-menu-item>
                    <a class="del" @click="kpxx(record.phone)">开票信息</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a class="del" @click="shdz(record.phone)">收货地址</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
          </template>
        </a-table>

        <div class="cyyl_tk" v-if="cyylflg">
          <div class="cyyl_box">
            <div class="close">
              <a-icon type="close" @click="close" />
            </div>
            <ul>
              <li>
                <span class="cyyl_tit">当前职业：</span>
                {{cyyl_data.currentoccupation}}
              </li>
              <li>
                <span class="cyyl_tit">身份证照：</span>
                <img :src="cyyl_data.idcardimg" alt />
              </li>
              <li>
                <span class="cyyl_tit">客户名称：</span>
                {{cyyl_data.customername}}
              </li>
              <li>
                <span class="cyyl_tit">业务类型：</span>
                {{cyyl_data.scope}}
              </li>
              <li>
                <span class="cyyl_tit">客户信息说明：</span>
                {{cyyl_data.customerinformation}}
              </li>
              <li>
                <span class="cyyl_tit">主要产品：</span>
                {{cyyl_data.mainproducts}}
              </li>
              <li>
                <span class="cyyl_tit">年产量：</span>
                {{cyyl_data.annualoutput}}
              </li>
              <li>
                <span class="cyyl_tit">采购件名称：</span>
                {{cyyl_data.nameparts}}
              </li>
              <li>
                <span class="cyyl_tit">使用品牌：</span>
                {{cyyl_data.usebrand}}
              </li>
              <li>
                <span class="cyyl_tit">型号及价格：</span>
                {{cyyl_data.modelPrice}}
              </li>
              <li>
                <span class="cyyl_tit">用量：</span>
                {{cyyl_data.consumption}}
              </li>
              <li>
                <span class="cyyl_tit">竞争对手/产品：</span>
                {{cyyl_data.competitor}}
              </li>
              <li>
                <span class="cyyl_tit">预计业务总额：</span>
                {{cyyl_data.totalbusiness}}
              </li>
              <li>
                <span class="cyyl_tit">是否具备创业资格：</span>
                {{cyyl_data.venturecapital}}
              </li>
              <li>
                <a-button @click="memberExamine(1)" type="primary">审核通过</a-button>
                <a-button @click="memberExamine(2)">审核不通过</a-button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import headerComm from "../header-comm/header.vue";
import hyym from "../tjhy/hyym.vue";
import kpxx from "../kpxx/kpxx.vue";
import shdz from "../shdz/shdz.vue";
import { constants } from "crypto";

const columns = [
  {
    title: "会员编号",
    dataIndex: "userid"
  },
  {
    title: "公司名称",
    dataIndex: "gsmc"
  },
  {
    title: "手机号码",
    dataIndex: "phone"
  },
  {
    title: "姓名",
    dataIndex: "username"
  },
  {
    title: "职位",
    dataIndex: "position",
    scopedSlots: { customRender: "position" }
  },
  {
    title: "会员级别",
    dataIndex: "uerlevel"
  },
  {
    title: "代理区域",
    dataIndex: "agentCity",
    scopedSlots: { customRender: "agentCity" }
  },
  // {
  //   title: "营业执照",
  //   dataIndex: "yyzz",
  //   scopedSlots: { customRender: "yyzz" }
  // },
  {
    title: "注册类型",
    dataIndex: "usertype",
    scopedSlots: { customRender: "usertype" }
  },
  {
    title: "任务人",
    dataIndex: "UserList",
    scopedSlots: { customRender: "UserList" }
  },
  {
    title: "推荐人",
    dataIndex: "sharer",
    scopedSlots: { customRender: "sharer" }
  },
  {
    title: "所在区域",
    dataIndex: "live",
    scopedSlots: { customRender: "live" }
  },
  {
    title: "注册时间",
    dataIndex: "dateline"
  },
  {
    title: "最近登录",
    dataIndex: "logintime"
  },
  {
    title: "操作",
    dataIndex: "operation",
    fixed: "right",
    scopedSlots: { customRender: "operation" },
    width: 150
  }
];
//上传图片
function getBase64(img, callback) {
  const reader = new FileReader();
  let file = [];
  file = reader;
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
  sessionStorage.setItem("file", reader);
}
const data = [];
export default {
  data() {
    this.cacheData = data.map(item => ({ ...item }));
    return {
      data,
      columns,
      sele: "",
      serchvalue: "",
      sqdwid: sessionStorage.getItem("sqdwid"),
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0,
        current: 1
      },
      loading: true,
      datakh: [],
      khvalue: "",
      kpxxphone: "",
      selectedRowKeys: [],
      selectedKeys: [],

      licensePic: [],
      sqdwid: "",
      radioval: 1,
      cyylflg: false,
      cyyl_data: "",
      tjrlist: [],
      tjrval: "",
      selval: "",
      UserList: "",
      rwrkeywoeds: ""
    };
  },
  components: {
    headerComm,
    hyym,
    kpxx,
    shdz
  },
  methods: {
    //搜索框
    onSearch(e) {
      this.serchvalue = e.target.value;
      this.pagination.current = 1;
      this.handleChangelist(this.pagination, this.serchvalue);
    },

    //表格
    handleChangelist(pagination, khmc) {
      this.pagination.current = pagination.current;
      this.axios
        .post(
          "huiyuan/memberList.php",
          qs.stringify({
            pageSize: pagination.defaultPageSize,
            page: this.pagination.current,
            sqdwid: this.$store.state.bbl_sqdwid,
            keywords: this.serchvalue,
            type: this.radioval
          })
        )
        //写到这------------------------
        .then(res => {
          if (res.data.code == 303) {
            for (var i = 0; i < res.data.result.data.length; i++) {
              if (res.data.result.data[i].licensePic != null) {
                res.data.result.data[i].licensePic = res.data.result.data[
                  i
                ].licensePic.split(",");
              }
              if (res.data.result.data[i].idcardimg != null) {
                res.data.result.data[i].idcardimg = res.data.result.data[
                  i
                ].idcardimg.split(",");
              }
            }
            this.data = res.data.result.data;
            this.pagination.total = Number(res.data.result.total);
            this.loading = false;
            this.cacheData = this.data.map(item => ({
              ...item
            }));

            for (var i = 0; i < res.data.result.data.length; i++) {
              this.data[i].key = i;
            }
          } else {
            this.loading = false;
            this.data = [];
          }
        });
    },
    //导出excel
    exportexl() {
      this.axios
        .post(
          "huiyuan/pushMemberList.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            location.href = res.data.result;

            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    selhandleChange(value) {
      console.log(`selected ${value}`);
      this.selvalue = value;
      this.axios
        .post(
          "huiyuan/memberRecomEdit.php",
          qs.stringify({
            id_num: this.tjrval.id_num,
            phone: this.tjrval.phone,
            sharer: value
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    //任务人选择
    rwrChange(value) {
      console.log(`selected ${value}`);
      // this.selvalue = value;
      this.axios
        .post(
          "huiyuan/memberBusinessEdit.php",
          qs.stringify({
            id_num: this.tjrval.id_num,
            businessName: value
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    selinput(value) {
      console.log(value);
      this.selval = value;
      this.getmemberRecomList(value);
    },
    rwrinput(value) {
      console.log(value);
      this.rwrkeywoeds = value;
      this.getChildUserList(value);
    },
    groupList(value) {
      console.log(value);
      this.tjrval = value;
    },
    handleBlur() {
      console.log("blur");
      this.selval = "";
      // this.getmemberRecomList();
    },
    handleFocus() {
      console.log("focus");
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //推荐人
    getmemberRecomList(value) {
      this.axios
        .post(
          "huiyuan/memberRecomList.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid,
            keywords: value
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.tjrlist = res.data.result;
            console.log("2222222222");
          } else {
            this.tjrlist = [];
            console.log("11111111111");
          }
          console.log(this.tjrlist);
        });
    },
    //任务人
    getChildUserList(value) {
      this.axios
        .post(
          "huiyuan/memberBusinessList.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid,
            keyWords: value
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.UserList = res.data.result;
            for (var i = 0; i < res.data.result.length; i++) {
              this.UserList[i].key = i;
            }
          } else {
            this.UserList = [];
          }
        });
    },
    //删除客户列表
    wzdelete(value, key) {
      console.log(value);
      const dataSource = [...this.data];
      this.data = dataSource.filter(item => item.key !== key);
      this.axios
        .post(
          "huiyuan/memberDelete.php",
          qs.stringify({ id_num: value.id_num })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    close() {
      this.cyylflg = false;
    },
    tjwz() {
      this.$store.state.tjwz = true;
    },

    xiugai(value, key) {
      console.log(value);
      this.$store.state.tjwz = true;
      this.$store.state.xiugaiflag = "123";
      if (this.$store.state.xiugaiflag != "") {
        this.$store.state.hygllist = value;
      }
    },

    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },

    //开票信息
    kpxx(value) {
      this.kpxxphone = value;
      this.$store.state.kpxx = true;
    },
    //收货地址
    shdz(value) {
      this.kpxxphone = value;
      this.$store.state.shdz = true;
    },
    create(value) {
      this.axios
        .post(
          "huiyuan/memberDetails.php",
          qs.stringify({
            sqdwid: "18775",
            phone: value.phone
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.cyylflg = true;

            this.cyyl_data = res.data.result;
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg,
              duration: 1.5
            });
          }
        });
    },
    memberReset(value) {
      this.axios
        .post(
          "huiyuan/memberReset.php",
          qs.stringify({
            id_num: value.id_num
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: "初始化密码成功",
              duration: 1.5
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg,
              duration: 1.5
            });
          }
        });
    },
    memberExamine(key) {
      this.axios
        .post(
          "huiyuan/memberExamine.php",
          qs.stringify({
            sqdwid: this.sqdwid,
            phone: this.cyyl_data.phone,
            examine_type: key
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.cyylflg = false;
            this.handleChangelist(this.pagination, this.serchvalue);

            this.$notification["success"]({
              message: "成功",
              description: res.data.msg,
              duration: 1.5
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg,
              duration: 1.5
            });
          }
        });
    },
    radioGroup(e) {
      this.radioval = e.target.value;
      console.log(e.target.value);
      this.handleChangelist(this.pagination, this.serchvalue);
    },
    //选择删除
    memdelete() {
      const newData = [...this.data];
      let selectedRowKeys = this.selectedRowKeys;
      console.log(this.selectedRowKeys);
      if (selectedRowKeys.length) {
        this.loading = true;
        this.axios
          .post(
            "huiyuan/memberDeleteBatch.php",
            qs.stringify({
              id_num: selectedRowKeys
              // sqdwid: this.$store.state.bbl_sqdwid
            })
          )
          .then(res => {
            //更新数据成功
            if (res.data.code == 303) {
              this.loading = false;
              this.selectedRowKeys = [];
              this.selectedKeys = [];
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg,
                duration: 1.5
              });
              this.handleChangelist(this.pagination, this.serchvalue);
              this.selectedKeys.map(rowkeys => {
                this.data = this.data.filter(item => item.key !== rowkeys);
              });
            } else {
              this.loading = false;
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg,
                duration: 1.5
              });
            }
          });
      } else {
        this.loading = false;
        this.$notification["error"]({
          message: "失败",
          description: "请先选择要删除的数据",
          duration: 1.5
        });
      }
    }
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this;
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedKeys = selectedRowKeys;
          var temp = [];
          for (var i = 0; i < selectedRows.length; i++) {
            if (temp.indexOf(selectedRows[i].id_num) == -1) {
              temp.push(selectedRows[i].id_num);
            }
          }
          this.selectedRowKeys = temp;
          console.log(this.selectedRowKeys);
        }
      };
    }
  },
  created() {
    this.handleChangelist(this.pagination, this.serchvalue);
    this.getmemberRecomList();
    this.getChildUserList();
    this.sqdwid = this.$store.state.bbl_sqdwid;
  }
};
</script>

<style lang='less' >

.yyzz {
  img {
    width: 50px;
    height: 50px;
    margin: 0 5px;
  }
}
.hygl_box {

  .gl_tjwz {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    height: 930px;
    .gl_tjym {
      position: absolute;
      width: 76% !important;
      left: 52% !important;
      top: 10%;
      transform: translateX(-50%);
      background-color: #fff;
    }
  }
  .header_sele {
    position: absolute;
    top: 55px;
    left: 200px;
    z-index: 999;
    text-align: right;
    width: 90%;
    background-color: #fff;
    box-shadow: 5px 5px 5px #ccc;
    // height: 50px;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .add_qy {
      // width: 50%;
      display: inline-block;
      text-align: left;
      padding: 10px 0;
      height: 50px !important;
      button {
        margin: 0 10px;
      }
      .ant-btn-primary {
        background-color: #1890ff !important;
        border: 0 !important;
      }
    }
    .seach {
      // display: inline-block;
      display: flex;
      align-items: center !important;
      .sele {
        position: relative;
        i {
          position: absolute;
          top: 10px;
          right: 8px;
        }
      }
    }
    // .list_head {
    //   display: inline-block;
    //   .tit {
    //     font-size: 16px;
    //   }
    //   padding: 10px 15px;
    //   .fl_right {
    //     .margin {
    //       margin: 0 5px;
    //     }
    //     .xzl_btn:hover {
    //       border: 0 !important;
    //       color: #fff !important;
    //       background: #1890ff !important;
    //     }
    //   }
    // }
  }
  .glwz {
    width: 98%;
    position: absolute;
    top: 147px;
    left: 1%;
    background-color: #fff;
    border: 1px solid #ccc;
    .ant-table-thead > tr,
    .ant-table-tbody > tr {
      // height: 50px !important;
    }
   
  }

  .fyloading {
    position: absolute;
    width: 90% !important;
    border: 1px solid #91d5ff;
    background: rgba(255, 255, 255, 0.5);
    padding: 30px;
    height: 800px !important;
    z-index: 999999 !important;
    top: 108px;
    left: 201px;
    // opacity: .5!important;
    .ant-spin-blur {
      opacity: 1 !important;
    }
    .ant-spin-text {
      font-size: 18px !important;
    }
    // .spin-content{
    //   color: #000;
    //   font-size: 16px!important;
    //   top: 100px!important;
    // }
  }
  .ant-spin-nested-loading > div > .ant-spin {
    top: 100px !important;
  }
  .del {
    padding-right: 15px;
    color: #40a9ff;
    cursor: pointer;
    color: #40a9ff !important;
  }
}
.cyyl_tk {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1000px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  .cyyl_box {
    width: 40%;
    min-height: 300px;
    background: #fff;
    position: absolute;
    top: 10%;
    left: 30%;
    text-align: left;
    padding: 35px;
    ul {
      li {
        margin: 10px 0;
        .cyyl_tit {
          display: inline-block;
          width: 150px;
          text-align: right;
          font-size: 14px;
          font-weight: bold;
        }
        img {
          width: 100px;
        }
        button {
          margin: 0 10px;
        }
      }
    }
  }
}
 .del {
      margin: 0;
      padding-right: 10px;
      color: #40a9ff !important;
      cursor: pointer;
    }
</style>
